<template>
    <div class="newsinfo-container">
        <h3 class="title">{{ newsInfo.name }}</h3>
        <h5 class="smallTitle">{{ newsInfo.timestamp | dateFormat }}</h5>
        <div class="content">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-media" v-for="item in songList" :key="item.id">
                    <router-link :to="'/home/newsInfoComment/' + item.id">
                        <img class="mui-media-object mui-pull-left" :src="item.images[0]">
                        <div class="mui-media-body">
                            <h3>{{ item.title }}</h3>
                            <p class="mui-ellipsis">
                                <span>{{ item.date }}</span>
                                <span>{{ item.display_date }}</span>
                            </p>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
       
    </div>
</template>

<script>
// import { Toast } from 'mint-ui';

export default {
    data() {
        return {
            id: this.$route.params.id, //将 URL 地址中传递过来的 ID 值, 挂载到 data 上, 方便以后调用
            newsInfo: {},
            songList: []
        }
    },
    created(){
        this.getNewsInfo();
    },
    methods: {
        getNewsInfo() { //获取新闻详情
            this.$http.get('/api/section/' + this.id ).then(result => {
                // if(result.body.code === 200){
                //     //console.log(result.body.result)
                //     this.newsInfo = result.body.result
                //     this.songList = result.body.result.songlist
                // }else{
                //     Toast('获取数据失败')
                // }
               // console.log(result.body)
                this.newsInfo = result.body
                this.songList = result.body.stories
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.newsinfo-container{
    padding: 0 10px;
    .title{
        font-size: 16px;
        margin: 15px 0;
        color: #333;
    }
    .smallTitle{
        font-size: 13px;
        color: #666;
        border-bottom: 1px solid #ddd;
        padding-bottom: 15px;
    }
    .mui-media{
        img{
            border-radius: 50%;
        }
        h3{
            font-size: 13px;
        }
        .mui-ellipsis{
            color: #999;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>
